<template>
   <!-- 加载图标样式6 -->
   <div class="loading">
      <div></div>
      <div></div>
      <div></div>
   </div>
</template>

<script setup>

</script>

<style scoped lang='scss'>
.loading>div,
.loading {
   box-sizing: border-box;
   position: relative
}

.loading {
   color: #1678ff;
   display: block;
   font-size: 0;
   height: 18px;
   width: 54px
}

.loading>div {
   animation: ball-beat .7s linear -.15s infinite;
   background-color: currentColor;
   border: 0 solid;
   border-radius: 100%;
   display: inline-block;
   float: none;
   height: 10px;
   margin: 4px;
   width: 10px
}

.loading>div:nth-child(2n-1) {
   animation-delay: -.5s
}

@keyframes ball-beat {
   50% {
      opacity: .2;
      transform: scale(.75)
   }

   to {
      opacity: 1;
      transform: scale(1)
   }
}
</style>
